<template>
  <!-- <a :href="isLink ?'https://www.example.com' :null" :style="{ cursor: isLink ?'pointer' :'default' }">点击这里</a>
<a href="/#/EQU_FAULT_PHENOMENON" target="_blank" style="cursor:pointer" >test</a> -->
  <div class="home-contianer">
    <!--by guoyuguo 2025.2.13-->
<!-- <div @click="beforeDestroy()">停止</div> -->
    <div class="carousel" 
             @mouseenter="pauseAutoPlay" 
             @mouseleave="startAutoPlay">
            <div class="carousel-inner">
                <div v-for="(image, index) in images" 
                     :key="index"
                     class="carousel-item"
                     :class="{ active: currentIndex === index }">
                    <img :src="image" :alt="'Slide ' + (index + 1)">
                </div>
            </div>

            <!-- 导航按钮 -->
            <div class="carousel-control prev" @click="prevSlide">❮</div>
            <div class="carousel-control next" @click="nextSlide">❯</div>

            <!-- 指示点 -->
            <div class="indicators">
                <div v-for="(_, index) in images" 
                     :key="index"
                     class="indicator"
                     :class="{ active: currentIndex === index }"
                     @click="goToSlide(index)">
                </div>
            </div>
        </div>
    <!--by guoyuguo 2025.2.13-->
        <div class="container">
      <div class="card" v-for="(card, index) in cards" :key="index">
        <h3 class="title" :class="getTitleClass(card.title)"><i :class="card.icon"></i>{{ card.title }}</h3>
        <ul class="items">
          <li v-for="(item, idx) in card.items" :key="idx" v-html=" item ">
          
          </li>
        </ul>
      </div>
      <div class="h-chart">
      <!-- <div class="h-left-grid">
        <div class="item" v-for="(item, index) in grid" :key="index">
          <div class="icon-text">
            <i :class="item.icon"></i>
            <span class="name">{{ item.name }}</span>
          </div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div> -->
      <!-- <div class="h-top-left" id="h-chart1">left</div>
      <div id="h-chart2"></div>
      <div id="h-chart3"></div> -->
    </div>
 
    </div>
    <!-- <iframe src="http://192.168.28.181:9990/#/EQU_FAULT_PHENOMENON" width="100%" height="1100" frameborder="0" scrolling="no"></iframe> -->

    <!-- <iframe src="http://192.168.110.183:8075/webroot/decision/login" width="100%" height="1100" frameborder="0" scrolling="no"></iframe> -->

 <!-- <iframe src="http://192.168.110.183:8075/webroot/iframe.html" width="100%" height="1100" frameborder="0" scrolling="no"></iframe> -->



 <!-- <div class="h-chart">
      <div class="h-left-grid">
        <div class="item" v-for="(item, index) in grid" :key="index">
          <div class="icon-text">
            <i :class="item.icon"></i>
            <span class="name">{{ item.name }}</span>
          </div>
          <div class="desc">{{ item.desc }}</div>
        </div>
      </div>
      <div class="h-top-left" id="h-chart1">left</div>
      <div id="h-chart2"></div>
      <div id="h-chart3"></div>
    </div> -->
    <!-- <div style="display: flex;">
      <div
        id="h-chart4"
        style="height: 350px; background: white; flex: 1;padding-top:15px;"
      ></div>
      <div
        id="h-chart5"
        style="height: 350px; background: white; flex: 1;padding-top:15px;"
      ></div>
    </div> -->
  </div>
  <!--by guoyuguo 2025.4.2-->
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>待处理任务</span>
              <el-tag type="warning">{{ pendingTasks }}</el-tag>
            </div>
          </template>
          <div class="card-content">
            <el-progress type="dashboard" :percentage="pendingPercentage" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>进行中任务</span>
              <el-tag type="primary">{{ inProgressTasks }}</el-tag>
            </div>
          </template>
          <div class="card-content">
            <el-progress type="dashboard" :percentage="inProgressPercentage" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>已完成任务</span>
              <el-tag type="success">{{ completedTasks }}</el-tag>
            </div>
          </template>
          <div class="card-content">
            <el-progress type="dashboard" :percentage="completedPercentage" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { chart1, chart2, chart3, chart4 } from './home/home-chart-options';
import { ref, onMounted, onUnmounted } from 'vue';
var $chart2;

export default {
  components: {},
  data() {
    return {
      pendingTasks:5,
      inProgressTasks:8,
      completedTasks:12,
      totalTasks: 100,
      pendingPercentage: 10,
      inProgressPercentage: 20,
      completedPercentage: 10,
      isLink: true,// 控制是否显示为小手光标
      currentIndex: 0,
                    autoPlayInterval: null,
                    images: [
                        //'https://picsum.photos/800/400?random=1',
                        'http://192.168.110.183:8088/Upload/Tables/Sys_Dictionary/img/page1.png?random=1',
                        'https://picsum.photos/1600/400?random=2',
                        'https://picsum.photos/1600/400?random=3',
                        'https://picsum.photos/1600/400?random=4'
                    ],
      cards: [
          { title: '待办事项',icon: 'el-icon-setting',plancount:0, items: ['待处理事项'] },
          { title: '消息', icon: 'el-icon-setting',items: ['最新异常'] },
          { title: '设备', icon: 'el-icon-setting',items: ['正在运行'] },
          { title: '工单', icon: 'el-icon-setting',items: ['已排产', '正在加工'] }
        ],
      center: [
        // {
        //   title: 'GitHub',
        //   icon: 'el-icon-set-up',
        //   url: 'https://github.com/cq-panda/Vue.NetCore'
        // },
        // {
        //   title: 'Gitee',
        //   icon: 'el-icon-turn-off',
        //   url: 'https://gitee.com/x_discoverer/Vue.NetCore'
        // },
        // {
        //   title: '框架Vue2版本',
        //   icon: 'el-icon-reading',
        //   url: 'http://v2.volcore.xyz'
        // },

        // {
        //   title: '框架视频',
        //   icon: 'el-icon-document',
        //   url: 'https://www.cctalk.com/m/group/90268531'
        // },

        // {
        //   title: '小程序/app/h5',
        //   icon: 'el-icon-chat-line-round',
        //   url: 'http://v2.volcore.xyz/app/guide'
        // },
        // {
        //   title: 'QQ3群743852316',
        //   icon: 'el-icon-chat-dot-round',
        //   url: 'https://jq.qq.com/?_wv=1027&k=Sqstuy0M'
        // }
      ],
      n: 90,
      value1: '1',
      applicants: {
        //报名信息
        day: 20, //本日
        week: 150, //本周
        month: 1200, //本月
        totalBoy: 800,
        totalGirl: 890,
        taotal: 1690
      }, //报名信息
      list: [
        { desc: '框架2.x版本不支持直接升级Vue3版本(代码生成器已修改)' },
        { desc: '框架使用的Element Plus组件，移除了Iview组件的依赖' },
        { desc: '框架内部组件全部重新优化,相比2.x版本首屏大小减少60%' },
        { desc: '框架Vue2版本会继续维护,并与Vue3版本同步更新,请放心使用' },
        { desc: '框架Vue2、Vue3版本开发文档一致(差异部分文档会备注说明)' },
        //{ desc: "若正在使用Vue2框架版本继续使用即可;其他建议使用Vue3版本" },
        {
          desc: 'vue2、vue3文档相同,开文档大部分文档仍然使用的vue2语法'
        },
        {
          desc: '自定义部分既可以使用vue3语法与可以使用vue3语法'
        }
        //(框架内部组件vue2/3语法都在使用),你也可以使用vue3语法
      ],
      grid: [
        {
          name: '用户管理',
          desc: '系统用户管理,注册用户3000000人。',
          icon: 'el-icon-user'
        },
        {
          name: '站内消息',
          desc: '您有一条新的消息,请及时处理。',
          icon: 'el-icon-chat-dot-round'
        },
        // {
        //   name: '系统管理',
        //   desc: '这里放点什么,还没想好。',
        //   icon: 'el-icon-setting'
        // },
        // {
        //   name: '还没想好',
        //   desc: '这里不知道应该放点什么或者写点什么。',
        //   icon: 'el-icon-document'
        // },
        // {
        //   name: '语音导航',
        //   desc: '高德地图林志玲为您语音导航。',
        //   icon: 'el-icon-microphone'
        // },
        // {
        //   name: '垃圾回收',
        //   desc: '删除过的数据在此处找回。。。。',
        //   icon: 'el-icon-delete'
        // }
      ]
    };
  },
  // setup() {
  //   let open = (item) => {
  //     window.open(item.url, '_blank');
  //   };
  //   let interval;
  //   onMounted(() => {
  //     $chart = echarts.init(document.getElementById('h-chart1'));
  //     $chart.setOption(chart1);
  //     $chart2 = echarts.init(document.getElementById('h-chart2'));
  //     $chart2.setOption(chart2);

  //     // interval = setInterval(() => {
  //     //   chart2.xAxis[0].data.splice(0, 1);
  //     //   let lastYear =
  //     //     chart2.xAxis[0].data[chart2.xAxis[0].data.length - 1] * 1 + 1;
  //     //   chart2.xAxis[0].data.push(lastYear);

  //     //   chart2.series[0].data.splice(0, 1);
  //     //   chart2.series[0].data.push(~~(Math.random() * 1000));

  //     //   chart2.series[1].data.splice(0, 1);
  //     //   chart2.series[1].data.push(~~(Math.random() * 1000));
  //     //   $chart2.setOption(chart2);
  //     // }, 2000);

  //     $chart3 = echarts.init(document.getElementById('h-chart3'));
  //     $chart3.setOption(chart3);
  //     let $chart4 = echarts.init(document.getElementById('h-chart4'));
  //     $chart4.setOption(chart4);
  //     let $chart5 = echarts.init(document.getElementById('h-chart5'));
  //     $chart5.setOption(chart2);
  //   });
  //   onUnmounted(() => {
  //     interval && clearInterval(interval);
  //     if ($chart) {
  //       $chart.dispose();
  //       $chart2.dispose();
  //       $chart3.dispose();
  //     }
  //   });
  //   return { open };
  // },
  // destroyed() {
  //   $chart2 = null;
  // },
  //by guoyuguo 2025.2.13
 
                mounted()
                {
               //   this.$message.success('执行成功');
                this.startAutoPlay();
                this.onRefresh();
               
                //  // 每3秒刷新一次页面
                // this.timer = setInterval(() => {
                //   this.onRefresh();
                
                // //  window.location.reload();
                // }, 5000);
                },
            methods: {
                beforeDestroy() {
      // 清除定时器，避免页面销毁时定时器还在运行
              clearInterval(this.timer);
              },
              onRefresh() { 
              
                this.request('homemes', null);
               
                },
                request(action, row) {
                //   let url = `api/V_PLAN_WORK_ORDER/${action}`;
                let url = `A_UpperComputer/${action}`;
                    this.http.post(url, row, true).then((result) => {
                      this.cards[0].items=result.data.item0;
                      this.cards[1].items=result.data.item1;
                      this.cards[2].items=result.data.item2;
                     this.cards[3].items=result.data.item3;// result.data.plancount;
                
                     console.log(result.data.order);
                 
                console.log(this. totalTasks.value);
                this.pendingPercentage = Math.round((this.pendingTasks /this. totalTasks) * 100)
                this.inProgressPercentage = Math.round((this.inProgressTasks /this.totalTasks) * 100)
                this.completedPercentage =Math.round((this.completedTasks /this. totalTasks) * 100)
                
                   //   this.$message.success('执行成功');
                    //  this.search();
                    });
                  },
                nextSlide() {
                    this.currentIndex = (this.currentIndex + 1) % this.images.length;
                },
                prevSlide() {
                    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
                },
                goToSlide(index) {
                  alert("mounted");
                //  this.$message.success('执行成功');
                    this.currentIndex = index;
                },
                startAutoPlay() {
                    this.autoPlayInterval = setInterval(() => {
                        this.nextSlide();
                    }, 3000);
                },
                pauseAutoPlay() {
                    clearInterval(this.autoPlayInterval);
                },
                getTitleClass(title) {
          const colorMap = {
            '待办事项': 'order',
            '消息': 'message',  
            '设备': 'application',          
            '工单': 'order0',
            
          }
          return colorMap[title] 
            ? `title-${colorMap[title]}`
            : 'title-default'
        }
            },
            beforeUnmount() {
                clearInterval(this.autoPlayInterval);
            },
      
};
var $chart, $chart2, $chart3;
// window.addEventListener("resize", function () {
//   $chart2.setOption(chart2);
// });
</script>

<style lang="less" scoped>
.home-contianer {
  padding: 6px;
  background: #eee;
  width: 100%;
  height: 100%;
  // max-width: 800px;
  // position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto;

  .h-top {
    display: flex;
    .h-top-left {
      height: 100%;
      width: 300px;
      background: white;
    }
    height: 300px;
  }
  .h-top > div {
    border: 1px solid #e8e7e7;
    border-radius: 5px;
    // margin: 6px;
  }
  .h-top-center {
    height: 100%;
    background: white;
    margin: 0 6px;
    display: flex;
    flex-direction: column;
    flex: 1;
    .item1 .num {
      padding-top: 28px;
    }
    .item2 .num {
      padding-bottom: 20px;
    }

    .n-item {
      width: 100%;
      height: 100%;
      text-align: center;
      cursor: pointer;
      // display: flex;
      .item {
        border-right: 1px solid #e5e5e5;
        width: 33.3333333%;
        float: left;
        height: 50%;
        border-bottom: 1px solid #e5e5e5;
        padding: 47px 0;
        font-size: 13px;
      }
      .item:hover {
        background: #f9f9f9;
        cursor: pointer;
      }
      .item:last-child {
        border-right: 0;
      }
      .item3,
      .item6 {
        border-right: 0;
      }
      .num {
        word-break: break-all;
        color: #282727;
        font-size: 30px;
        transition: transform 0.8s;
      }
      .num:hover {
        color: #55ce80;
        transform: scale(1.2);
      }
      .text {
        font-size: 13px;
        color: #777;
      }
    }
  }
  .h-top-right {
    // flex: 1;

    width: 400px;
    height: 100%;
    background: white;
  }
  .h3 {
    padding: 7px 15px;
    font-weight: 500;
    background: #fff;
    border-bottom: 1px dotted #d4d4d4;
  }
}
.task-table {
  table {
    width: 100%;
    .thead {
      font-weight: bold;
    }
    tr {
      cursor: pointer;
      td {
        border-bottom: 1px solid #f3f3f3;
        padding: 9px 8px;
        font-size: 12px;
      }
    }
    tr:hover {
      background: #eee;
    }
  }
}
.h-chart {
  height: 100px;
  margin: 6px 0px;
  display: flex;
  .h-left-grid {
    width: 300px;
    height: 100%;
    background: white;
    display: inline-block;
    .name {
      margin-left: 7px;
    }
    .item:hover {
      background: #f9f9f9;
      cursor: pointer;
    }
    .item {
      padding: 22px 14px;
      float: left;
      width: 50%;
      height: 33.33333%;
      border-bottom: 1px solid #eee;
      border-right: 1px solid #eee;
      i {
        font-size: 30px;
      }
      .desc {
        font-size: 12px;
        color: #c3c3c3;
        padding: 5px 0 0 4px;
        line-height: 1.5;
      }
    }
  }
}
#h-chart2 {
  border-radius: 3px;
  background: white;
  padding-top: 10px;
  height: 100%;
  width: 0;
  flex: 1;
  margin: 0 7px;
}
#h-chart3 {
  border-radius: 3px;
  padding: 10px 10px 0 10px;
  background: white;
  // padding-top: 10px;
  height: 100%;

  width: 400px;
}

//by guoyuguo 2025.2.13
.container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 10px;
      background-color: #f5f5f5;
    }

    .card {
      width: 240px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 16px;
    }

    .title {
      margin: 0 0 12px 0;
      color: #333;
      font-size: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid #eee;
    }

    .items {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .items li {
      padding: 6px 0;
      color: #666;
      position: relative;
      padding-left: 15px;
      color: #4dabf7; 

    }
    .pointer{
    cursor: pointer;
    }
    .items li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 12px;
      width: 6px;
      height: 6px;
      background: #999;
      border-radius: 50%;
    }

          /* 新增标题颜色样式 */
    .title {
      margin: 0 0 12px 0;
      font-size: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid; /* 移除固定颜色 */
    }

       /* 不同卡片标题颜色 */
       .card:nth-child(1) h2 { border-color: #ff6b6b; color: #ff6b6b; }
        .card:nth-child(2) h2 { border-color: #4dabf7; color: #4dabf7; }
        .card:nth-child(3) h2 { border-color: #69db7c; color: #69db7c; }
        .card:nth-child(4) h2 { border-color: #ff922b; color: #ff922b; }
        .card:nth-child(5) h2 { border-color: #9c36b5; color: #9c36b5; }
    /* 定义不同标题颜色 */
    .title-order0 {
      color: #9c36b5;
      border-bottom-color: #9c36b5;
    }
    .title-order1 {
      color: #ff6b6b;
      border-bottom-color: #ff6b6b;
    }
    .title-order {
      color: #409EFF;
      border-bottom-color: #409EFF;
    }
    .title-message {
      color: #67C23A;
      border-bottom-color: #67C23A;
    }
    .title-application {
      color: #E6A23C;
      border-bottom-color: #E6A23C;
    }
    .title-default {
      color: #666;
      border-bottom-color: #eee;
    }
    //by guoyuguo 2025.2.13
    .carousel {
            position: relative;
            width: 1600px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }

        .carousel-inner {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .carousel-item {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .carousel-item.active {
            opacity: 1;
        }

        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .carousel-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            cursor: pointer;
            user-select: none;
        }

        .carousel-control.prev {
            left: 0;
        }

        .carousel-control.next {
            right: 0;
        }

        .indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .indicator.active {
            background: rgba(255, 255, 255, 0.9);
        }
</style>

<style scoped>
.home {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
</style> 

